<template>
  <div>
    <h2 style="margin-bottom: 30px">{{ title }}</h2>

    <el-form
      :model="editForm"
      label-width="auto"
    >
      <el-form-item label="项目简称：">
        <el-select
          style="width: 30%"
          v-model="editForm.projectId"
          placeholder="请选择"
        >
          <el-option
            v-for="item in projectNameOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工程名称：">
        <el-select
          style="width: 30%"
          v-model="editForm.constructName"
        >
          <el-option
            v-for="item in enginNameOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分部分项：">
        <el-cascader
          style="width: 30%"
          v-model="editForm.idArr"
          :options="davisOptions"
          @change="branchForMaterHandler"
          :props="props"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="施工单位：">
        <el-select
          style="width: 30%"
          v-model="editForm.constructDept"
          placeholder="请选择"
        >
          <el-option
            v-for="item in constructUnitOptions"
            :key="item.name"
            :label="item.label"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关联计划：">
        <el-cascader
          style="width: 30%"
          v-model="editForm.relaySchema"
          :options="relaySchemaOptions"
          :props="{
            label: 'name',
            value: 'id',
            children: 'projectPlans',
          }"
          @change="relaySchemaChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="线别：">
        <el-select
          style="width: 30%"
          v-model="editForm.lineType"
          placeholder="请选择"
        >
          <el-option
            v-for="item in lineTypeOptions"
            :key="item.value"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="验收区间：">
        <el-row
          style="width: 30%; text-align: center"
          type="flex"
        >
          <el-col :span="2">DK</el-col>
          <el-col :span="4"
            ><el-input
              v-model="editForm.intervalStartKm"
              @blur="
                editForm.intervalStartKm = Number(editForm.intervalStartKm)
              "
            ></el-input
          ></el-col>
          <el-col :span="1">+</el-col>
          <el-col :span="4"
            ><el-input
              v-model="editForm.intervalStartM"
              @blur="editForm.intervalStartM = Number(editForm.intervalStartM)"
            ></el-input
          ></el-col>
          <el-col :span="2">到</el-col>
          <el-col :span="2">DK</el-col>
          <el-col :span="4"
            ><el-input
              v-model="editForm.intervalEndKm"
              @blur="editForm.intervalEndKm = Number(editForm.intervalEndKm)"
            ></el-input
          ></el-col>
          <el-col :span="1">+</el-col>
          <el-col :span="4"
            ><el-input
              v-model="editForm.intervalEndM"
              @blur="editForm.intervalEndM = Number(editForm.intervalEndM)"
            ></el-input
          ></el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="验收里程：">
        <el-input
          style="width: 30%"
          placeholder="请输入验收里程/米"
          v-model="editForm.mileage"
          @blur="editForm.mileage = Number(editForm.mileage)"
        >
        </el-input>
      </el-form-item>
      <el-form-item label="消耗物资：">
        <el-row
          style="width: 30%; text-align: center"
          type="flex"
        >
          <el-col
            :span="20"
            style="font-size: 0.8rem; color: rgb(201, 201, 201)"
            >请先选择分部分项</el-col
          >
          <el-col :span="4"
            ><el-button
              @click="addRow"
              icon="el-icon-circle-plus-outline"
              circle
              type="text"
              style="font-size: 1.4rem"
            ></el-button
          ></el-col>
        </el-row>
        <el-row
          v-for="(item, index) in inspectMaterialList"
          :key="index"
          type="flex"
          justify="end"
          style="width: 30%; margin-bottom: -5px; text-align: center"
        >
          <el-col :span="20">
            <el-input
              v-model="item.num"
              style="width: 100%"
              @blur="item.num = Number(item.num)"
              placeholder="请输入物资数量"
            >
              <el-select
                v-model="item.materialId"
                slot="prepend"
                placeholder="请选择物资"
                @change="materForUnitHandler"
              >
                <el-option
                  v-for="el in materOptions"
                  :key="el.id"
                  :label="el.name"
                  :value="el.id"
                >
                </el-option>
              </el-select>
              <el-button
                slot="append"
                type="text"
                disabled
                >{{ unit }}</el-button
              >
            </el-input>
          </el-col>
          <el-col :span="4">
            <el-button
              @click="deleteRow(index)"
              icon="el-icon-remove-outline"
              circle
              type="text"
              style="
                font-size: 1.4rem;
                color: #f56c6c;
                line-height: 40px;
                padding: 0;
              "
            ></el-button
          ></el-col>
        </el-row>
      </el-form-item>
      <el-form-item label="验收状态：">
        <el-select
          style="width: 30%"
          v-model="editForm.status"
          placeholder="请选择"
        >
          <el-option
            label="未通过"
            :value="0"
          >
          </el-option>
          <el-option
            label="通过"
            :value="1"
          >
          </el-option>
          <el-option
            label="未审核"
            :value="2"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目负责人：">
        <el-select
          style="width: 30%"
          v-model="editForm.projectLeader"
          placeholder="请选择"
        >
          <el-option
            v-for="item in manOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="专业工长：">
        <el-select
          style="width: 30%"
          v-model="editForm.foreman"
          placeholder="请选择"
        >
          <el-option
            v-for="item in manOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="施工班组长：">
        <el-select
          style="width: 30%"
          v-model="editForm.teamLeader"
          placeholder="请选择"
        >
          <el-option
            v-for="item in manOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="相关文件：">
        <el-upload
          style="width: 30%; color: rgb(199, 199, 199)"
          class="upload-demo"
          :action="uploadUrl"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          multiple
          :auto-upload="false"
          :on-exceed="handleExceed"
          :on-change="handleChange"
          :file-list="editForm.relayDocument"
        >
          <el-button
            size="small"
            type="primary"
            >点击上传</el-button
          >
          <div
            slot="tip"
            class="el-upload__tip"
          >
            只能上传doc/pdf文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-row style="margin: 100px 0 0 20%">
      <el-button
        plain
        @click="$router.back(-1)"
        >返回</el-button
      >
      <el-button
        type="primary"
        @click="saveHandler"
        >保存并提交审批</el-button
      >
    </el-row>
  </div>
</template>

<script>
import {
  getProjectList,
  getBranchItemList,
  getEnableUserList,
} from '../../../http/commonApi.js'
import {
  getrelaySchemaList,
  saveInspectCheck,
  uploadInspectCheck,
} from '../../../http/inTellingSchedule/inspectBatch.js'
import { getDataType } from '../../../http/dictionary.js'
import { getMaterialInfoByItem } from '../../../http/inTellingSchedule/branchItem.js'
export default {
  data() {
    return {
      title: '新增',
      unit: '',
      editForm: {
        id: null,
        projectId: null,
        constructName: '',
        idArr: [],
        branchId: null,
        itemId: null,
        constructDept: '',
        relaySchema: [],
        lineType: null,
        intervalStartKm: null,
        intervalStartM: null,
        intervalEndKm: null,
        intervalEndM: null,
        mileage: null,
        status: null,
        projectLeader: null,
        foreman: null,
        teamLeader: null,
        relayDocument: null,
      },
      inspectMaterialList: [{ materialId: null, num: null }],
      uploadUrl: '000',
      // fileList:[],
      projectNameOptions: [],
      enginNameOptions: [
        {
          label: '工程名称1',
          value: '工程名称1',
        },
        {
          label: '工程名称2',
          value: '工程名称2',
        },
        {
          label: '工程名称3',
          value: '工程名称3',
        },
      ],
      davisOptions: [],
      props: {
        // lazy: true,
        value: 'id',
        label: 'name',
        children: 'itemList',
        leaf: 'leaf',
        // lazyLoad(node, resolve) {
        //   const { level } = node
        //   setTimeout(() => {
        //     resolve(node)
        //   }, 100)
        // },
      },
      subItemOptions: [
        {
          label: '分项1',
          name: '分项1',
        },
        {
          label: '分项2',
          name: '分项2',
        },
        {
          label: '分项3',
          name: '分项3',
        },
      ],
      constructUnitOptions: [
        {
          label: '施工单位1',
          name: '施工单位1',
        },
        {
          label: '施工单位2',
          name: '施工单位2',
        },
        {
          label: '施工单位3',
          name: '施工单位3',
        },
      ],
      relaySchemaOptions: [],
      lineTypeOptions: [],
      applyInspectItem: [
        [
          {
            id: 1,
            name: '施工测量',
            value: null, //通过，0未通过
          },
          {
            id: 2,
            name: '轨排拼装',
            value: null, //通过，0未通过
          },
          {
            id: 3,
            name: '基底处理',
            value: null, //通过，0未通过
          },
          {
            id: 4,
            name: '走行轨安装',
            value: null, //通过，0未通过
          },
          {
            id: 5,
            name: '钢筋绑扎',
            value: null, //通过，0未通过
          },
        ],
        [
          {
            id: 1,
            name: '施工测量',
            value: null, //通过，0未通过
          },
          {
            id: 2,
            name: '轨排拼装',
            value: null, //通过，0未通过
          },
          {
            id: 3,
            name: '基底处理',
            value: null, //通过，0未通过
          },
          {
            id: 4,
            name: '其他',
            value: null, //通过，0未通过
          },
        ],
      ],
      materOptions: [],
      manOptions: [],
      projectAndposit: [
        {
          value: '工程名称1',
          label: '工程名称1',
          children: [
            {
              value: '分部名称1',
              label: '分部名称1',
              children: [
                {
                  value: '分项名称1',
                  label: '分项名称1',
                },
                {
                  value: '分项名称2',
                  label: '分项名称2',
                },
                {
                  value: '分项名称3',
                  label: '分项名称3',
                },
              ],
            },
            {
              value: '分部名称2',
              label: '分部名称2',
              children: [
                {
                  value: '分项名称1',
                  label: '分项名称1',
                },
                {
                  value: '分项名称2',
                  label: '分项名称2',
                },
              ],
            },
          ],
        },
        {
          value: '工程名称2',
          label: '工程名称2',
          children: [
            {
              value: '分部名称1',
              label: '分部名称1',
              children: [
                {
                  value: '分项名称1',
                  label: '分项名称1',
                },
                {
                  value: '分项名称2',
                  label: '分项名称2',
                },
                {
                  value: '分项名称3',
                  label: '分项名称3',
                },
              ],
            },
            {
              value: '分部名称2',
              label: '分部名称2',
              children: [
                {
                  value: '分项名称1',
                  label: '分项名称1',
                },
                {
                  value: '分项名称2',
                  label: '分项名称2',
                },
                {
                  value: '分项名称3',
                  label: '分项名称3',
                },
              ],
            },
            {
              value: '分部名称3',
              label: '分部名称3',
              children: [
                {
                  value: '分项名称1',
                  label: '分项名称1',
                },
                {
                  value: '分项名称2',
                  label: '分项名称2',
                },
                {
                  value: '分项名称3',
                  label: '分项名称3',
                },
              ],
            },
          ],
        },
        {
          value: '工程名称3',
          label: '工程名称3',
          children: [
            {
              value: '分部名称1',
              label: '分部名称1',
            },
            {
              value: '分部名称2',
              label: '分部名称2',
            },
            {
              value: '分部名称3',
              label: '分部名称3',
            },
          ],
        },
      ],
      inspectorOptions: [
        {
          label: '张三',
          name: '张三',
        },
        {
          label: '李四',
          name: '李四',
        },
        {
          label: '王二',
          name: '王二',
        },
        {
          label: '张四',
          name: '张四',
        },
        {
          label: '李四',
          name: '李四',
        },
      ],
    }
  },

  mounted() {
    // let params = this.$route.query
    // if (params.project === undefined) {
    //   this.title = '新增'
    // } else {
    //   this.title = '编辑'
    //   this.editForm = params
    // }
    // 获取关联计划列表
    this.getrelaySchemaListApi(15)
    // 获取线别
    this.getDataTypeApi()
    // 获取启用用户
    this.getEnableUserListApi()

    this.getBranchItemListApi()
    if (this.projectNameOptions.length == 0) {
      this.getProjectListApi()
    } else {
      return
    }
  },

  methods: {
    handleRemove(file, fileList) {
      // console.log(file, fileList)
    },
    handlePreview(file) {
      // console.log(file)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove(file, fileList) {
      // console.log('fileList::: ', fileList)
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleChange(file, fileList) {
      // console.log('file,fileList::: ', file, fileList[0].raw)
      this.editForm.relayDocument = fileList[0].raw
    },
    // 保存按钮
    saveHandler() {
      this.editForm.branchId = this.editForm.idArr[0]
      this.editForm.itemId = this.editForm.idArr[1]
      this.editForm.planType = this.editForm.relaySchema[0]
      this.editForm.planId = this.editForm.relaySchema[1]
      console.log('this.editForm::: ', this.editForm)
      // if (this.title === '新增') {
      //   this.$message.success('新增成功')
      // } else {
      //   this.$message.success('编辑成功')
      // }
      // this.$router.push({
      //   path: '/inspectBatch',
      //   query: this.editForm,
      // })
      this.saveInspectCheckApi({
        inspectCheck: this.editForm,
        inspectMaterialList: this.inspectMaterialList,
      })
      // 上传附件
      this.uploadInspectCheckApi({
        file: this.editForm.relayDocument,
      })
    },
    //
    relaySchemaChange(v) {
      // console.log('v::: ', v)
    },
    // 增加一行物资选择
    addRow() {
      if (this.editForm.idArr.length == 0) {
        this.$message.error('请先选择分部分项名称')
      } else {
        this.inspectMaterialList.push({
          materialId: null,
          num: null,
        })
      }
    },
    // 减少一行
    deleteRow(index) {
      console.log('index::: ', index)
      this.inspectMaterialList.splice(index, 1)
      console.log('::: ', this.inspectMaterialList)
    },
    // 选择分部后获取物资信息
    branchForMaterHandler(v) {
      getMaterialInfoByItem({ id: v[1] }).then((res) => {
        if (res.code == 200) {
          this.materOptions = res.data
        }
      })
    },
    // 选择物资获取单位
    materForUnitHandler(v) {
      this.unit = this.materOptions.filter((el) => {
        return el.id == v
      })[0].unit
    },
    /**
     * 接口
     */
    // 项目列表
    getProjectListApi() {
      getProjectList().then((res) => {
        if (res.code == 200) {
          this.projectNameOptions = res.data
        }
      })
    },
    // 分部分项列表
    getBranchItemListApi() {
      getBranchItemList().then((res) => {
        if (res.code == 200) {
          this.davisOptions = res.data
        }
      })
    },
    // 获取关联计划列表
    getrelaySchemaListApi(id) {
      getrelaySchemaList({ id }).then((res) => {
        if (res.code == 200) {
          this.relaySchemaOptions = res.data
          this.relaySchemaOptions.forEach((el) => {
            el.id = el.planType
            el.name = el.planTypeName
            if (el.projectPlans.length != 0 && el.projectPlans != null) {
              el.projectPlans.forEach((item) => {
                item.name = item.planCycleStart + '~' + item.planCycleEnd
              })
            }
          })
        }
      })
    },
    // 获取线别
    getDataTypeApi() {
      getDataType({ type: 'ht_line_type' }).then((res) => {
        if (res.code == 200) {
          this.lineTypeOptions = res.data
        }
      })
    },
    // 获取启用用户
    getEnableUserListApi() {
      getEnableUserList().then((res) => {
        if (res.code == 200) {
          this.manOptions = res.data
        }
      })
    },

    // 保存
    saveInspectCheckApi(params) {
      saveInspectCheck(params).then((res) => {
        console.log('r保存::: ', res)
        if (res.code == 200) {
          this.$message.success('保存成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 上传附件
    uploadInspectCheckApi(params) {
      uploadInspectCheck(params).then((res) => {
        console.log('上传::: ', res)
        if (res.code == 200) {
          this.$message.success('上传成功')
        } else {
          this.$message.error(res.message)
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.el-form-item__label-wrap) {
  margin-left: 0px !important;
}
// :deep(.el-input){
//   width: 30%;
// }
:deep(.el-input-group__prepend) {
  width: 30%; /* 设置宽度为80% */
}
:deep(.el-input-group__append) {
  width: 20%; /* 设置宽度为80% */
}
</style>
